<template>
    <span class="down-execel">
            <Poptip v-model="showFilter" placement="bottom-end">
                <i class="el-icon-search poptip-condition-add"></i>
                <a href="javascript:;" class='poptip-condition-add'>列表查找a</a>

                <div slot="content">
                    <Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
                        <i class="el-icon-plus"></i>
                        <a href="javascript:;">添加过滤条件</a>
                        <div slot="content" class="condition-list">
                            <ul>
                                <li
                                    v-for="(item, index) in selectHeada"
                                    :key="index"
                                    class='poptip-condition-item'
                                    @click="addFilterCondition(item)">
                                    {{item.label}}
                                </li>
                            </ul>
                        </div>
                    </Poptip>

                    <el-form :model="conditionForma" ref="conditionForma" label-width="120px" class="demo-dynamic" @submit.native.prevent>
                        <el-form-item
                            v-for="(condition, index) in conditionForma.condition"
                            :label="condition.label"
                            :key="condition.key"
                            :prop="'condition.' + index + '.value'"
                            :rules="{required: false, message: condition.label + '不能为空', trigger: 'blur'}">



                            <el-select v-if='condition.label === "订单状态" && code === "orderInProcess"' v-model="condition.value" placeholder="请选择订单状态" size="small">
								<el-option label="待接单" value="待接单"></el-option>
								<el-option label="代理人撰写中" value="代理人撰写中"></el-option>
								<el-option label="案件内审中" value="案件内审中"></el-option>
								<el-option label="案件修改中" value="案件修改中"></el-option>
								<el-option label="定稿文件发送中" value="定稿文件发送中"></el-option>
								<el-option label="发明人确认定稿中" value="发明人确认定稿中"></el-option>
								<el-option label="上报文件上传中" value="上报文件上传中"></el-option>
							</el-select>

                            <el-autocomplete
								v-else-if='condition.label === "代理人" && (code === "orderInProcess" || code === "patent")'
								v-model="formAgent.name"
								:fetch-suggestions="querySearch1"
								:trigger-on-focus="true"
								placeholder="请选择代理人"
								:validate-event='false'
								@select="handleSelect1"
								@input = 'changInput'
								size="small">
							</el-autocomplete>

                            <el-date-picker
								v-model="submitTime"
								type="daterange"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
								size="small"
								:validate-event='false'
								@input = 'changInput'
								v-else-if='condition.label === "提交时间" && (code === "orderInProcess" || code === "patent")'>
							</el-date-picker>

                            <el-date-picker
                                v-model="condition.value"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                size="small"
                                :validate-event='false'
                                v-else-if='(condition.label === "提交时间" || condition.label === "更新时间") && code === "default"'>
                            </el-date-picker>

                            <el-autocomplete
								v-else-if='condition.label === "专属顾问" && (code === "orderInProcess" || code === "patent")'
								v-model="formProcess.name"
								:fetch-suggestions="querySearch2"
								:trigger-on-focus="true"
								placeholder="请选择专属顾问"
								:validate-event='false'
								@input = 'changInput'
								@select="handleSelect2"
								size="small">
							</el-autocomplete>

                            <el-autocomplete
                                class="processInput"
								v-else-if='condition.label === "专属顾问" && (code === "canBeInvoice" || code === "alreadyInvoice")'
								v-model="formProcess.name"
								:fetch-suggestions="querySearch2"
								:trigger-on-focus="true"
								placeholder="请选择专属顾问"
								:validate-event='false'
								@input = 'changInput'
								@select="handleSelect2"
								size="small">
							</el-autocomplete>

                            <el-date-picker
                                v-model="refund_at"
                                type="daterange"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                @change = 'changInput'
                                :validate-event='false'
                                size="small"
                                v-else-if='condition.label === "退款时间" && code === "alreadyInvoice"'>
                            </el-date-picker>

                            <el-date-picker
                                v-model="ticket_at"
                                type="daterange"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                @change = 'changInput'
                                :validate-event='false'
                                size="small"
                                v-else-if='condition.label === "开票时间" && code === "alreadyInvoice"'>
                            </el-date-picker>


                            <el-date-picker
                                v-model="updatedTime"
                                type="daterange"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                @change = 'changInput'
                                :validate-event='false'
                                size="small"
                                v-else-if='condition.label === "更新时间" && code === "canBeInvoice"'>
                            </el-date-picker>

                            <el-select v-else-if='condition.label === "专利类型" && code === "orderInProcess"' v-model="condition.value" placeholder="请选择专利类型" size="small">
								<el-option label="发明专利" value="发明专利"></el-option>
								<el-option label="实用新型" value="实用新型"></el-option>
								<el-option label="外观设计" value="外观设计"></el-option>
								<el-option label="不确定" value="不确定"></el-option>
							</el-select>

                            <el-select v-else-if='condition.label === "专利类型" && code === "patent"' v-model="condition.value" placeholder="请选择专利类型" size="small">
                                <el-option label="发明专利" value="F"></el-option>
                                <el-option label="外观设计" value="W"></el-option>
                                <el-option label="实用新型" value="S"></el-option>
                                <!-- <el-option label="不确定" value="S"></el-option> -->
                            </el-select>

                            <el-select v-else-if='condition.label === "支付状态" && code === "patent"' v-model="condition.value" placeholder="请选择支付状态" size="small">
                                <el-option label="已缴费" value="1"></el-option>
                                <el-option label="未缴费" value="2"></el-option>
                            </el-select>

                            <el-select v-else-if='condition.label === "订单状态" && code === "patent"' v-model="condition.value" placeholder="请选择订单状态" size="small">
                                <!-- <el-option label="未接单" value="未接单"></el-option>
                                <el-option label="代理人撰写中" value="代理人撰写中"></el-option>
                                <el-option label="案件内审中" value="案件内审中"></el-option>
                                <el-option label="案件修改中" value="案件修改中"></el-option>
                                <el-option label="定稿文件发送中" value="定稿文件发送中"></el-option>
                                <el-option label="发明人确认定稿中" value="发明人确认定稿中"></el-option>
                                <el-option label="上报文件上传中" value="上报文件上传中"></el-option> -->
                                <el-option label="等待提交国知局" value="等待提交国知局"></el-option>
                                <el-option label="已提交国知局" value="已提交国知局"></el-option>
                                <el-option label="等待补正" value="等待补正"></el-option>
                                <el-option label="已补正" value="已补正"></el-option>
                                <el-option label="等待答复" value="等待答复"></el-option>
                                <el-option label="已答复" value="已答复"></el-option>
                                <el-option label="初步审查合格" value="初步审查合格"></el-option>
                                <el-option label="实质审查中" value="实质审查中"></el-option>
                                <el-option label="驳回" value="驳回"></el-option>
                                <el-option label="授权" value="授权"></el-option>
                                <!-- <el-option label="下证" value="下证"></el-option> -->
                                <el-option label="撤案" value="撤案"></el-option>
                            </el-select>


                            <el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForma')"></el-input>
                            <el-button @click.stop="removeDomain(condition)" size="mini" v-no-more-click:3000>删除</el-button>
                        </el-form-item>
                    </el-form>

                    <div class="btns">
                        <el-button @click="submitsearch('conditionForma')" size="mini" v-no-more-click:3000>查询</el-button>
                        <el-button @click="resetForm('conditionForma')" size="mini" v-no-more-click:3000>重置</el-button>
                    </div>
                </div>
            </Poptip>
        </span>
</template>

<script>
export default {
    data() {
        return {
            showFilter: false,
            selectHeada: this.selectHead,
            showFilterCondition: false,
            conditionForma: this.conditionForm,
            submitTime: [],
            updatedTime: [],
            refund_at: [],
            ticket_at: [],
            formAgent: {},
            formProcess: {},
            code: this.routeid || 'default'
        }
    },

    props: {
        selectHead: {
            type: Array
        },
        conditionForm: {
            type: Object
        },
        routeid: {
            type: String
        },
        restaurants: {
            type: Array
        },
        restaurants2: {
            type: Array
        }
    },

    watch: {
        // restaurants: {
        //     deep: true,
        //     handler(newVal,oldVal) {
        //         console.log(newVal,oldVal, '变化了')
        //     }
        // }
    },


};
</script>
<style lang="less" scoped>
.file_sh {
    font-size: 25px;
}
/deep/.ivu-poptip-inner {
    min-width: 450px;
    // height: 300px;
    overflow-y: scroll;
}

/deep/.poptip-condition .ivu-poptip-inner {
    min-width: 180px;
}
.down-execel {
		display: block;
		height: 40px;
		line-height: 40px;
		color: #333333;
		font-size: 14px;
		float: right;
		margin-right: 20px;
  }

.demo-dynamic {
    padding-left: 10px;

    .el-form-item {
        margin-bottom: 12px;
    }

    .el-input {
        width: 240px;
    }

    .el-date-editor {
        width: 240px;
    }

    .el-button {
        padding: 9px 15px;
        vertical-align: baseline;
    }

    .el-form-item__error {
        padding-top: 0;
    }
}

  .processInput {
    display: inline-block !important;
  }

.poptip-condition {
    display: block;
    margin-top: 10px;

    .poptip-condition-item {
        line-height: 25px;
        cursor: pointer;
    }

    .poptip-condition-add {
        font-size: 14px;
    }
}

.btns {
    margin-top: 10px;
}
</style>

